<template>
  <div id="">
    <headerbox :headerTitle="'搜索'" :hasBack='true'></headerbox>
    <div class="searchBox">
      <img src="@/assets/friendImage/serach_icon4.png" alt="" width="15" @click="searchEvent">
      <input type="text" name="" v-model="searchKey" placeholder="输入昵称或ID查找好友" @keyup.enter="searchEvent">
    </div>

    <noneList v-if="friendList.length==0" :noneTxt="'无结果'"></noneList>
    <ul class="formList" v-else>
      <li class="friend" v-for="user in friendList" :key="user.key"
        @click="applyFriend(user.id)">
          <img :src="imgUrlLink(user.headPortrait)" alt="">
          <span>{{user.nickName}}</span>
          <em v-if="user.id==memberId" class="myself">本人</em>
      </li>
    </ul>
  </div>
</template>
<script>
import {circleUserSearch,circleApply} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    searchKey:'',
    xlyd_loginInfo:'',    //用户信息
    friendList:[],
    memberId:'',
  }),
  components: {
    noneList:()=>import('@/components/noneList/noneList'),
  },
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 搜索
    searchEvent(event) {
      let self = this;
      let userSearchParam = {
        token:this.xlyd_loginInfo.token,
        keywords:this.searchKey
      }
      circleUserSearch(userSearchParam).then(res=>{
        console.log(res);
        if(res) {
          self.friendList = res.data.result;
        }
      })
    },
    // 添加好友申请
    applyFriend(id) {
      console.log('添加好友申请');
      let self = this;
      let applyParam = {
        token:self.xlyd_loginInfo.token,
        userId:id,
      }
      self.messageBox.confirm('提交申请改好友').then(action=>{
        circleApply(applyParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
          }
        })
      }).catch(error=>{
        console.log(error);
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.xlyd_loginInfo = xlyd_loginInfo;
    this.memberId = xlyd_loginInfo.id;
  }
}
</script>
<style lang="scss" scoped>
.searchBox{
  @include flex;
  height: 30px; line-height: 30px;
  margin:10px;
  background: white;
  border-radius: 4px;
  padding: 6px 10px;
  input{
    @include flexcell;
    margin-left: 10px;
    height: 30px;
  }
}
.friend{
  border-bottom: 1px solid $borderColor;
  @include flex;
  padding: 10px;
  background: white;
  position: relative;
  img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-right: 10px;
  }
  .myself{
    position: absolute;
    right: 10px;
    top: 0;
    height: 70px;
    line-height: 70px;
    color: $redColor;
    font-size: 12px;
    font-weight: bold;
  }
}
</style>
